<script setup lang="ts">
import type { ThemeModeType } from '@/lib/typings';

import { ref, watch } from 'vue';

import { updatePreferences, usePreferences } from '@/lib/preferences';
import { Icon } from '@/components/core/icon';

import { useAppStore } from '@/store';

defineOptions({
  name: 'Theme',
});
const { theme } = usePreferences();
const appStore = useAppStore();
const THEME_PRESET: Array<{
  icon: string;
  label: string;
  name: ThemeModeType;
}> = [
  {
    icon: `mdi:white-balance-sunny`,
    label: '浅色',
    name: 'light',
  },
  {
    icon: `mdi:moon-and-stars`,
    label: '深色',
    name: 'dark',
  },
  {
    icon: `mdi:sun-moon-stars`,
    label: '跟随系统',
    name: 'auto',
  },
];
const modelValue = ref<string>(theme.value || 'light');
function activeClass(theme: string): string[] {
  return theme === modelValue.value ? ['outline-box-active'] : [];
}
watch(
  () => modelValue.value,
  (val) => {
    const html = document.querySelector('html') as HTMLHtmlElement;
    html.dataset.theme = val;
    updatePreferences({ theme: { mode: val as ThemeModeType } });
    appStore.updateSetting({ theme: val });
  },
);
</script>
<template>
  <div class="content">
    <template v-for="item in THEME_PRESET" :key="item.name">
      <div class="flex flex-col cursor-pointer" @click="modelValue = item.name">
        <div
          :class="activeClass(item.name)"
          class="py-4 outline-box flex-center"
        >
          <Icon :icon="item.icon" class="mx-9 size-5" />
        </div>
        <div class="mt-2 text-xs text-center text-muted-foreground">
          {{ item.label }}
        </div>
      </div>
    </template>
  </div>
</template>
